<template>

	<!-- 日历 -->
	<view>
		<uni-calendar :insert="true" :lunar="false" :start-date="'2019-3-2'" :end-date="'2099-5-20'" @change="change" />
	</view>

	<!--这个是图表 -->
	<view class="charts-box">
		<qiun-data-charts type="line" :ontouch="true" :opts="opts" :chartData="chartData" :animation="false" />
	</view>

	<view>

		<view class="mytitle"> 健康水平</view>
		<uni-card>

			<view class="mydate"> {{current_date}} / 心率状态</view>

			<uni-row class="level-health">
				<uni-col :span="12">
					<view class="heartRate"> {{avg_heartrate}} </view><span>BPM</span>
				</uni-col>
				<uni-col :span="12">
					<view class="max-min-box">
						<view class="max-number">
							<image src="../../static/max.png" class="max-image"></image>
							{{max_heartrate}}
						</view>
						<view class="min-number">
							<image src="../../static/min.png" class="max-image"></image>
							{{min_heartrate}}
						</view>
					</view>
				</uni-col>
			</uni-row>
		</uni-card>


	</view>
	<view class="footer">
	</view>

</template>

<script>
	import sqlite from "@/common/sqlite.js"

	export default {
		data() {
			return {
				current_date: "",
				avg_heartrate: 0, // 平均心率
				max_heartrate: 0,
				min_heartrate: 0,
				chartData: {}, // 图表数据
				opts: { // 图表样式配置
					timing: "easeOut",
					color: ["#ff0000", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4"],
					enableScroll: true, // 允许滑动
					dataLabel: false, // 不显示数值
					dataPointShape: false, //不显示点
					padding: [30, 0, 0, 0], // 图表上下左右的距离
					xAxis: { //x 轴的配置
						disableGrid: true,
						itemCount: 50, // 一个视野内最多显示的数据
						disabled: true, // x 轴不显示

					},
					yAxis: { //y轴配置
						disableGrid: false,
						gridType: 'solid'
					},
					extra: { //线的样式
						line: {
							type: "curve", //将折线图弄成圆滑类型
							width: 1,
							color: "red"
						},
					},
				}
			}
		},
		onLoad() {

		},
		mounted() {
			let today = this.getLocalDate()
			this.current_date = today
			this.getData(today);
		},
		onReady() {

		},
		methods: {
			//选择日期执行这个方法
			change(e) {
				// console.log("当前选择的日期", e)

				//变更日期前，先将 心率状态 重置
				this.avg_heartrate = 0
				this.max_heartrate = 0
				this.min_heartrate = 0

				let change_date = e.fulldate
				this.current_date = change_date
				this.getData(change_date)
			},

			//获取某天的数据
			getData(change_date) {
				// 数据库中根据日期读取历史数据
				let this_ = this

				//查询数据库数据
				sqlite.selectDate(change_date).then(function(e) {
					let categories = []
					let data = []
					// console.log(e)

					//将数据构造成 ucharts 要求的格式
					for (var i in e) {
						let d = e[i]
						categories.push(i)
						data.push(d["heartRate"])
					}

					let res = {
						categories: categories,
						series: [{
							name: "心率 [左右滑动查看]",
							data: data
						}, ]
					}

					//将数据设置到图表
					this_.chartData = JSON.parse(JSON.stringify(res));

					//计算最大平均 
					let total = data.reduce((pre, value, index, arr) => {
						return pre + value;
					});
					this_.avg_heartrate = Math.trunc(total / data.length)
					//计算最大
					this_.max_heartrate = Math.max(...data)
					//计算最小
					this_.min_heartrate = Math.min(...data)

				}, function() {
					console.log("读取数据失败")
				})

			},
			getLocalDate() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				month = (month > 9) ? month : ("0" + month);
				day = (day < 10) ? ("0" + day) : day;
				var today = year + "-" + month + "-" + day;
				return today

			},
		},

	}
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 280px;
	}

	.mytitle {
		font-size: 20px;
		margin: 20px;
		font-weight: 700;
	}

	.mycard {
		margin: 20px;
	}

	.footer {
		height: 30px;
	}

	.mydate {
		font-size: 16px;
		color: black;
		color: black;
	}

	.heartRate {
		font-size: 80px;
		color: black;
		display: inline-block;
		margin-top: 60px;
		margin-bottom: 60px;
	}

	.max-image {
		width: 30px;
		height: 30px;
	}

	.max-min-box {
		margin-top: 50px;
		margin-left: 50px;
		color: black;
	}

	.max-number,
	.min-number {
		font-size: 25px;
	}
</style>
